
<style lang="scss">
@import '../static/common/variable.scss';

.register {
  padding: 15px;

  h3 {
    text-align: center;
  }

  .form {
    margin-top: 30px;

    div {
      margin-top: 10px;

      input {
        height: 44px;
        border-bottom: 2px solid #ccc;
        width: 100%;
        font-size: 18px;
      }

      button {
        width: 100%;
        height: 50px;
        border-radius: 25px;
        margin-top: 10px;
        font-size: 18px;
      }

      button.active {
        background-color: $bgColor;
        color: #ffffff;
        font-size: 18px;
      }
    }

    section {
      line-height: 44px;
      width: 100%;
      display: flex;
      align-items: center;

      input {
        height: 44px;
        border-bottom: 2px solid #ccc;
        font-size: 18px;
        width: 120px;
      }

      button {
        vertical-align: middle;
        background-color: transparent;
        font-size: 18px;
        margin-left: 10px;
      }
    }

    p {
      font-size: 14px;
      margin-top: 10px;
      line-height: 175%;
      color: #666;

      input[type='checkbox'] {
        width: 18px;
        height: 18px;
        vertical-align: middle;
      }

      span {
        vertical-align: middle;
      }

      a {
        color: #000;
      }
    }
  }

  .footer {
    position: fixed;
    left: 0;
    padding: 15px;
    bottom: 100px;
    width: 100%;
    text-align: center;
    font-size: 16px;
    a {
      // text-decoration: none;
      color: #666;
      font-size: 16px;
    }
  }
}

.icon-type {
   width: 24px;
   height: 24px;
   background-size: 100% 100%;
   background-image: url(../static/img/i-hide.png);
   position: absolute;
   right: 10px;
   top: 10px;
}

.icon-type.show {
  background-image: url(../static/img/i-show.png);
}
</style>

<template>
  <div class="register">
    <h3>注册账号</h3>
    <div class="form">
      <div>
        <input v-model="form.user_acc" type="text" placeholder="请输入邮箱/账号">
      </div>
      <div style="width: 100%; position: relative;">
        <input v-model="form.user_pwd" :type="ctype == 1 ? 'password':'text'" placeholder="请输入密码">
        <i @click="showPwd" :class="['icon-type', ctype == 1 ? '':'show']"></i>
      </div>
      <section>
        <input type="text" v-model="form.email_code">
        <button @click="sendEmailCode">{{ text }}</button>
      </section>
      <div>
        <!-- <button @click="register" :class="form.user_acc.length != 0 ? 'active' : ''">注册</button> -->
        <button @click="register" :class="isActive == true ? 'active' : ''">注册</button>
      </div>
      <p>
        <input type="checkbox" v-model="form.isSelect">
        <span>
          我已阅读并同意 <a href="#">服务协议</a> 和 <a href="#">手机YY博客隐私政策</a>
          注册用户验证通过可以登录使用网站服务。
        </span>
      </p>
    </div>

    <div class="footer">
      <RouterLink to="/login">登录</RouterLink>  /   <RouterLink to="/">首页</RouterLink>
    </div>
  </div>
  <!-- p不建议嵌套块级元素，那样会把这个p分割两段 -->
</template>

<script lang="ts">
import { ref, reactive , watch} from 'vue'
import  { useRouter } from 'vue-router'
import { registerFn, sendEmailCodeFn } from '../api/index'
import { message } from 'ant-design-vue';

// 规范对象的结构
interface User {
  user_acc: string;
  user_pwd: string;
  email_code?: string;
  isSelect: boolean
}

export default {
  // 入口函数（初始化）
  setup() {
    let s = 60 * 1000;
    let d:any = null;
    const router = useRouter();
    let ctype = ref(1)
    let text = ref('点击发送验证码')
    let isActive = ref(false);
    // 采集表单信息
    let form = reactive<User>({
      user_acc: '',
      user_pwd: '',
      email_code: '',
      isSelect: false
    })
    //编写发送邮箱验证码的函数
    const sendEmailCode = async () => {

      if(d != null) {
        message.info('已发送验证码到邮箱')
        return ;
      }
      // console.log('xx:', form.user_acc)
      if (form.user_acc) {
        await sendEmailCodeFn({ email: form.user_acc })
          .then(
            content => {
              //  console.log('1.0',content)
              let { code, msg } = content;
              if (code == 200) {
                message.success(msg);
                // 提示
                text.value="已发送验证码到邮箱";
                d = setTimeout(()=> {
                  text.value="点击重新发送验证码";
                   d = null;
                } , s)
              }
              else {
                message.error(msg)
              }
            }
          )
      }
      else {
        message.error('请输入邮箱')
      }
    }
    // 提交表单信息
    const register = async () => {
      let { user_acc, user_pwd, email_code, isSelect } = form;
      // console.log({ user_acc, user_pwd, email_code, isSelect });
      if (!isSelect) {
        message.error('请阅读隐私协议和服务政策。');
        return;
      }
      // 判断 减少报错
      if (user_acc && user_pwd && email_code) {
        // 注册
        await registerFn({user_acc,user_pwd,email_code}).then(
          content => {
            console.log('2.0',content)
            let { code, msg } = content;
            if (code == 200) {
              message.success(msg)
              // 跳转页面
              setTimeout(()=>{
                router.push({
                  path: `/login`,
                  query: {
                    user_acc
                  }
                })
              },300)
            }
            else {
              message.error(msg)
            }
          }
        )
      }
      else {
        message.error('请填写完整的参数、')
      }

    }
    // 控制显示隐藏密码
    const showPwd = ()=> {
       if(ctype.value == 1) {
        ctype.value = 2;
       }
       else {
        ctype.value = 1
       }
    }

    watch(form,(newValue)=> {
      // console.log('xxx')
      if(newValue.user_acc.length != 0) {
        isActive.value = true;
      }
      else {
        isActive.value = false;
      }

    }, {deep: true})

    return {
      isActive,
      form,
      sendEmailCode,
      register,
      text,
      ctype,
      showPwd
    }
  }
}

</script>




